@import "@/styles/base/index.scss";


.our-blogs {
  &-hd {
    margin: 140px 0 50px 0;
  }

  .blog-list {
    gap: 32px;
  }

  .blog-item {
    padding: 26px 0 24px 0;
    gap: 8px;

    .blog-img-wrap img {
      border-radius: 16px;
    }

    .blog-title {
      color: #0c0c0c;
      font-size: 24px;
      line-height: 36px;
      font-weight: 500;
      margin: 10px 0;
    }

    .blog-desc {
      font-size: 18px;
      line-height: 28px;
      color: #62605e;
      font-weight: 400;
    }


  }

  .btn-line {
    padding: 32px 0 96px 0;

    .more-btn {
      background-color: rgba(0, 0, 0, 0);
      border: 0.2em solid #942ffb;

      color: $themeColor;
      font-size: 17px;
      line-height: 1.5;
      font-weight: 700;
      letter-spacing: 2px;

      height: 3.5rem;
      // width: 40rem;
      width: 90%;
      line-height: 20px;
      border-radius: 80px;
      padding-top: 7px;

      .svg-icon-wrapper {
        margin-top: -7px;
      }
    }
  }
}


@media (max-width: 1023px) {
  .our-blogs {

    .blog-list a:last-child {
      display: none;
    }
  }
}


@media (max-width: 639px) {
  .our-blogs {

    &-hd {
      flex-direction: column;

      .line {
        display: none;
      }
    }
  }
}


@media (max-width: 480px) {
  .our-blogs {

    .blog-list {
      flex-direction: column;

    }
  }
}